<template>
	<view class="" style="background-color: #F8F8F8;">
		<view class="nav-back">
			<top-heigth></top-heigth>
			<view class="addr-msg" v-if="isShowMsg">
				<view class="addr-msg-title">权限使用说明</view>
				<view>应用需要获取您的位置权限，我们将获取您的准确位置信息向您推荐离您最近的技师和周边信息</view>
				<view class="addr-msg-btn" @click="msgClick">我知道了</view>
			</view>
			<uv-navbar leftText="北京" :fixed="false" bg-color="rgba(0,0,0,0)" title="服务地址" :safeAreaInsetTop="false">
				<template v-slot:right>
				</template>
				<template v-slot:left>
					<view class="uv-nav-slot" @click="goback()">
						<image src="/static/image/go.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view>
				</template>
			</uv-navbar>
		</view>	
					
		<view class="content-box m-t24">
			<view class="add-address-box m-b16">
				<view class="add-font-box">
					<view class="add-font-l">联系人</view>
					<view class="add-font-r  add-more">
						<uv-input v-model="name" placeholder="请输入联系人" border="none"></uv-input>
						<view class="">
							<uv-radio-group v-model="sexValue">
								<uv-radio 
									:customStyle="{margin: '8px'}" 
									v-for="(item, index) in radiolist" 
									:key="index" 
									:label="item.label"
									:name="item.name"
									>
								</uv-radio>
							</uv-radio-group>
							
						</view>
						
					</view>
				</view>
				<view class="add-font-box">
					<view class="add-font-l">手机号</view>
					<view class="add-font-r">
						<uv-input v-model="phone" placeholder="请输入手机号" border="none"></uv-input>
					</view>
				</view>
				<view class="add-font-box" v-if="!isShenhe">
					<view class="add-font-l">服务地址</view>
					<view class="add-font-r add-more" @click="selectMap">
						<uv-input placeholder="请选择服务地址" readonly="readonly" v-model="address" border="none"></uv-input>
						<uv-icon name="/static/image/more.png"></uv-icon>
					</view>
				</view>
				<view class="add-font-box" v-else>
					<view class="add-font-l">服务地址</view>
					<view class="add-font-r add-more">
						<uv-input placeholder="请填写服务地址" v-model="address" border="none"></uv-input>
					</view>
				</view>
				<view class="add-font-box" style="border: none;">
					<view class="add-font-l">门牌号</view>
					<view class="add-font-r">
						<uv-input v-model="detailAddress" placeholder="请输入门牌号例如1号楼1单元1011室" border="none"></uv-input>
					</view>
				</view>
			</view>

			<view @click="upList()"  class="login-but">保存</view>
			
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				id: null,
				name: '',
				sexValue: 0,
				phone: '',
				lat:39.91,
				lng:116.41,
				address:'',
				detailAddress: '',
				proId: 110000,
				cityId: 110100,
				disId: 110106,
				isShowMsg: false,
				radiolist: [{
					name: 1,
					label: '先生'
				}, {
					name: 0,
					label: '女士'
				}],
				userInfo: uni.getStorageSync('userInfo'),
				isShenhe: 1
			}
		},
		components: { TopHeigth},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getAddress()
			}
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
		},
		methods: {
			selectMap(){
				console.log('iiiinnn')
				let system = uni.getSystemInfoSync(); // 获取系统信息
				// if (system.platform === 'android') { // 判断平台
				// 	this.isShowMsg = true; //弹出授权说明
				// }
				this.isShowMsg = true; //弹出授权说明
			
			},
			msgClick(){
				this.isShowMsg = false;
				uni.chooseLocation({
					type: 'gcj02',
					success:(res) => {
						console.log('location', res)
						this.lat = res.latitude
						this.lng = res.longitude
						this.address = res.address
						uni.request({
							url:"https://restapi.amap.com/v3/geocode/regeo?key=8bb5265417fbf03e07a85e276baa162d&location="+res.longitude+","+res.latitude+"&poitype=&radius=1000&extensions=base&roadlevel=0",
							success:(res) => {
								if(res.statusCode == 200){
									this.disId = res.data.regeocode.addressComponent.adcode
								}
							}
						})
					}
				})
			},
			upList(){
				if(!this.phone || !this.name || !this.detailAddress || !this.disId){
					return uni.showToast({
						title: "填写完整",
						icon: 'none'
					})
				}
				var regExp = /^(1\d{10})$/;
				if(!regExp.test(this.phone)){
					return uni.showToast({
						title: "手机号错误",
						icon: 'none'
					})
				}
				 uni.$u.http.post('/api/shop/v1_0/tAppUserAddressRCA/insertTAppUserAddress',{
					 id: this.id,
					 appUserId: this.userInfo.id,
					 nane: this.name,
					 sex: this.sexValue,
					 phone: this.phone,
					 address: this.address,
					 detailAddress: this.detailAddress,
					 lat: this.lat,
					 lng: this.lng,
					 proId : this.proId,
					 cityId : this.cityId,
					 disId : this.disId
				}).then((res) => {
					this.goback()
				}) 
			},
			getAddress(){
				uni.$u.http.post('/api/shop/v1_0/tAppUserAddressRCA/turnTAppUserAddressInfo',{
					 id:this.id,
				}).then((res) => {
					let add = res.data;
					this.id = add.id
					this.name = add.nane
					this.sexValue = add.sex
					this.phone = add.phone
					this.address = add.address
					this.detailAddress = add.detailAddress
					this.lat = add.lat
					this.lng = add.lng	
					this.proId = add.proId
					this.cityId = add.cityId
					this.disId = add.disId
				}) 
			},
			goback(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.add-font-box{
		@include flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 2rpx solid #EEEEEE;
		padding: 32rpx 0;
		.add-font-l{
			width: 126rpx;
			font-size: 30rpx;
			color: #333;
			margin-right: 30rpx;
			font-weight: bold;
		}
		.add-font-r{
			width: calc(100% - 156rpx);
		}
	}
	
	.add-address-box{
		border-radius: 12px;
		padding:0 24px;
		background-color: #fff;
	}
	.add-more{
		@include flex;
		align-items: center;
		justify-content: space-between;
	}
	.addr-msg{
		width: 90%;
		padding: 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		position: absolute;
		z-index: 9999;
		margin: 0 auto;
		left: 50%;
		top: 20rpx;
		transform: translateX(-50%);
		line-height: 44rpx;
		border-radius: 10rpx;
		.addr-msg-title{
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.addr-msg-btn{
			width: 35%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-weight: bold;
			color: #fff;
			background: #27A0FF;
			margin: 0 auto;
			margin-top: 26rpx;
		}
	}
</style>
